<template>
  <div>
    <HeadNav page-name="佣金明细" :borderType="true" :showNav="true" />
    <view class="commission">
      <view>
        <u-tabs
          active-color="#E44435"
          height="92"
          inactive-color="#737373"
          font-size="28"
          name="cate_name"
          bar-width="150"
          bar-height="4"
          count="cate_count"
          :list="commissionList"
          :is-scroll="false"
          :current="currentOptions"
          @change="currentOptionsChange"
        ></u-tabs>
      </view>
      <!-- 帮卖佣金 -->
      <view
        class="commission-bg"
        v-if="currentOptions !== 1 && currentOptions !== 2"
      >
        <view class="flex-col commission-section_6">
          <view class="flex-row commission-group_7">
            <text>给供货团长帮卖获得的佣金</text>
            <u-icon
              name="question-circle"
              color="#969799"
              @click="helpSellShow = true"
            ></u-icon>
          </view>
          <text class="commission-text_7"
            >帮卖佣金=用户实付金额 x 帮卖佣金比例</text
          >
        </view>
        <view style="padding: 32rpx 0; height: 160rpx">
          <u-row gutter="16">
            <u-col span="4">
              <view class="flex-col supply-layout">
                <view class="justify-evenly supply-group_8">
                  <text class="supply-text_6">￥</text>
                  <text class="supply-text_8">99</text>
                </view>
                <text class="supply-text_10">帮卖佣金</text>
              </view>
            </u-col>
            <u-col span="4">
              <view class="flex-col supply-layout">
                <view class="justify-evenly supply-group_8">
                  <text class="supply-text_6">￥</text>
                  <text class="supply-text_8">66</text>
                </view>
                <text class="supply-text_10">帮卖金额</text>
              </view>
            </u-col>
            <u-col span="4">
              <view class="flex-col supply-layout">
                <view class="justify-evenly supply-group_8">
                  <text class="supply-text_6"></text>
                  <text class="supply-text_8">22</text>
                </view>
                <text class="supply-text_10">帮卖订单数(单)</text>
              </view>
            </u-col>
          </u-row>
        </view>
      </view>
      <!-- 推荐佣金 -->
      <view class="commission-bg" v-if="currentOptions === 1">
        <view class="flex-col commission-section_6">
          <view class="flex-row commission-group_7">
            <text>推荐团长给供货团长转到的佣金</text>
            <u-icon
              name="question-circle"
              color="#969799"
              @click="recommendShow = true"
            ></u-icon>
          </view>
          <text class="commission-text_7"
            >推荐佣金=推荐团长帮吗佣金 x 推荐佣金比例</text
          >
        </view>
        <view style="padding: 32rpx 0; height: 160rpx">
          <u-row gutter="16">
            <u-col span="4">
              <view class="flex-col supply-layout">
                <view class="justify-evenly supply-group_8">
                  <text class="supply-text_6">￥</text>
                  <text class="supply-text_8">99</text>
                </view>
                <text class="supply-text_10">推荐佣金</text>
              </view>
            </u-col>
            <u-col span="4">
              <view class="flex-col supply-layout">
                <view class="justify-evenly supply-group_8">
                  <text class="supply-text_6"></text>
                  <text class="supply-text_8">0.5%-5%</text>
                </view>
                <text class="supply-text_10">推荐佣金比例</text>
              </view>
            </u-col>
            <u-col span="4">
              <view class="flex-col supply-layout">
                <view class="justify-evenly supply-group_8">
                  <text class="supply-text_6"></text>
                  <text class="supply-text_8">10</text>
                </view>
                <text class="supply-text_10">推荐人数</text>
              </view>
            </u-col>
          </u-row>
        </view>
      </view>
      <!-- 专属佣金 -->
      <view class="commission-bg" v-if="currentOptions === 2">
        <view class="flex-col commission-section_6">
          <view class="flex-row commission-group_7">
            <text>供货团长设置的专属佣金</text>
            <u-icon
              name="question-circle"
              color="#969799"
              @click="exclusiveShow = true"
            ></u-icon>
          </view>
          <text class="commission-text_7"
            >专属佣金=用户实付金额 x 专属佣金比例</text
          >
        </view>
        <view style="padding: 32rpx 0; height: 160rpx">
          <u-row gutter="16">
            <u-col span="6">
              <view class="flex-col supply-layout">
                <view class="justify-evenly supply-group_8">
                  <!-- <text class="supply-text_6">￥</text> -->
                  <text class="supply-text_8">200</text>
                </view>
                <text class="supply-text_10">专属佣金</text>
              </view>
            </u-col>
            <u-col span="6">
              <view class="flex-col supply-layout">
                <view class="justify-evenly supply-group_8">
                  <!-- <text class="supply-text_6">￥</text> -->
                  <text class="supply-text_8">50%</text>
                </view>
                <text class="supply-text_10">专属佣金比例</text>
              </view>
            </u-col>
          </u-row>
        </view>
      </view>
      <!-- 帮卖佣金说明 -->
      <u-popup
        v-model="helpSellShow"
        mode="center"
        border-radius="14"
        length="85%"
      >
        <view class="flex-col help-sell-section_1">
          <text class="help-sell-text">帮卖佣金说明</text>
          <view class="help-sell-text_1"
            >以5%帮卖佣金举例：<br />你为帮卖团长销售10000元，可获得500元（10000*5%）的帮卖佣金</view
          >
          <view
            class="flex-col items-center help-sell-button"
            @click="helpSellShow = false"
          >
            <text>知道了</text>
          </view>
        </view>
      </u-popup>
      <!-- 推荐佣金说明 -->
      <u-popup
        v-model="recommendShow"
        mode="center"
        border-radius="14"
        length="85%"
      >
        <view class="flex-col help-sell-section_1">
          <text class="help-sell-text">推荐佣金说明</text>
          <view class="help-sell-text_1"
            >以3%推荐佣金举例：<br />你推荐A为团长B的帮卖团长，A为B帮卖100元，你可以获得100*3%=3元推荐佣金</view
          >
          <view
            class="flex-col items-center help-sell-button"
            @click="recommendShow = false"
          >
            <text>知道了</text>
          </view>
        </view>
      </u-popup>
      <!-- 专属佣金说明 -->
      <u-popup
        v-model="exclusiveShow"
        mode="center"
        border-radius="14"
        length="85%"
      >
        <view class="flex-col help-sell-section_1">
          <text class="help-sell-text">专属佣金说明</text>
          <view class="help-sell-text_1"
            >以5%专属佣金举例：<br />你每为团长完成1000元销售，可额外获得50元专属佣金</view
          >
          <view
            class="flex-col items-center help-sell-button"
            @click="exclusiveShow = false"
          >
            <text>知道了</text>
          </view>
        </view>
      </u-popup>
    </view>
  </div>
</template>
<script>
import HeadNav from "@/components/headNav/index.vue";
export default {
  name: "commission",
  components: {HeadNav},
  data() {
    return {
      commissionList: [
        {
          cate_name: "帮卖佣金",
        },
        {
          cate_name: "推荐佣金",
        },
        {
          cate_name: "专属佣金",
        },
      ],
      currentOptions: 0,
      helpSellShow: false, // 帮卖佣金说明
      recommendShow: false, // 推荐佣金说明
      exclusiveShow: false, // 专属佣金说明
    };
  },
  // 在test.vue页面接受参数
  onLoad: function (option) {
    // this.currentOptionsChange()
    this.currentOptions = option.supply;
    console.log(option.supply);
  },
  methods: {
    // 点击切换tabs
    currentOptionsChange(index) {
      this.currentOptions = index;
      console.log(index, "list---");
    },
  },
};
</script>
<style lang="scss" scoped>
.commission {
  height: 100vh;
  background: #f2f3f5;
  .commission-bg {
    background-color: #fff;
  }
}
// 布局
.supply-layout {
  display: flex;
  align-items: center;
  .supply-text_6 {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.9);
  }
  .supply-text_8 {
    font-size: 40rpx;
    font-weight: 500;
    color: #323233;
  }
  .supply-text_10 {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.9);
    font-family: PingFangSC, PingFangSC-Regular;
  }
}
.commission-section_6 {
  margin-top: -4rpx;
  border-top: 2rpx solid #eee;
  border-bottom: 2rpx solid #eee;
  padding: 28rpx 32rpx;
  background-color: rgb(255, 255, 255);
}
.commission-group_7 {
  color: rgb(0, 0, 0);
  font-size: 32rpx;
  line-height: 44rpx;
  white-space: nowrap;
}
.commission-text_7 {
  margin-top: 10rpx;
  color: rgba(0, 0, 0, 0.3);
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
}
.commission-image_6 {
  margin: 8rpx 0;
  width: 28rpx;
  height: 28rpx;
}

// 帮卖佣金说明
.help-sell-section_1 {
  padding-top: 66rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 16rpx;
}
.help-sell-text {
  align-self: center;
  color: rgb(0, 0, 0, 0.6);
  font-size: 36rpx;
  font-weight: 500;
  line-height: 50rpx;
  white-space: nowrap;
}
.help-sell-text_1 {
  margin-top: 24rpx;
  align-self: center;
  color: rgb(0, 0, 0, 0.6);
  font-size: 32rpx;
  line-height: 48rpx;
  text-align: left;
  width: 506rpx;
}
.help-sell-button {
  margin-top: 46rpx;
  padding: 22rpx 0 24rpx;
  color: rgb(228, 68, 53);
  font-size: 36rpx;
  font-weight: 500;
  line-height: 50rpx;
  white-space: nowrap;
  box-shadow: inset 0px 2rpx 0px 0px rgb(238, 238, 238);
  border-radius: 0px 0px 16rpx 16rpx;
  width: 640rpx;
}
</style>
